{% extends "./default.html" %}
{% block content %}


<!-- Everything inside the #post tags pulls data from the post -->
<section>

    <header class="main content">
        <span class="date">{{post.date}}</span>
        <h1>{{title}}</h1>
        {% if post.discription %}
        <p class="content">{{post.discription}}</p>
        {% endif %}
    </header>

    {% if post.sImg %}
    <div class="image main"><img src="{{post.sImg}}" alt="{{post.title}}" /></div>
    {% endif %}

    <div class="content">
        {{post.comments | safe}}
    </div>



    <footer class="post-footer">

        <div class="authors">

            <a class="author-box" href="/author/{{post.uAuthor._id}}">
                {% set author = post.uAuthor %}
                {% if author.logo %}
                <img class="author-profile-image" src="{{author.logo}}" alt="{{author.userName}}" />
                {% endif %}
                <section class="author-box-content">
                    <div class="author-box-label">Author</div>
                    <h5 class="author-box-name">{{author.userName}}</h5>
                    {% if author.website %}
                    <p>{{author.website}}</p>
                    {{else}}
                    <p>Read more posts by this author.</p>
                    {% endif %}
                </section>
            </a>

        </div>

    </footer>


</section>

<script>
    var images = document.querySelectorAll('.kg-gallery-image img');
    images.forEach(function (image) {
        var container = image.closest('.kg-gallery-image');
        var width = image.attributes.width.value;
        var height = image.attributes.height.value;
        var ratio = width / height;
        container.style.flex = ratio + ' 1 0%';
    })
</script>

{% endblock %}